<script setup lang="ts">
import { inject, ref, onMounted, computed } from "vue";
import type { FormDesignerComponents, FormItemPerm } from "../FormComponentMixin";
import { isReadonly } from "../FormItem";
const props = defineProps({
  type: {
    type: String,
    default: ""
  },
  mode: {
    type: String,
    default: "normal" //组件模式，free设计模式，normal 编辑模式, read 阅读模式，disable 禁用模式
  }
});

const _value = defineModel<number | string>();
const config = defineModel<FormDesignerComponents>("config");
const perm = inject<Array<FormItemPerm>>("perm");
const inputValue = ref<number>();
const min = ref(0);
const max = ref(65535);
const mounted = ref(false);

onMounted(() => {
  mounted.value = true;
  if (_value.value) {
    inputValue.value = parseInt(_value.value as string);
  }
  if (config.value.props.min) {
    min.value = config.value.props.min;
  }
  if (config.value.props.max) {
    max.value = config.value.props.max;
  }
});

const disabled = computed(() => {
  if (props.mode === "disable" && isReadonly(perm, config.value.code)) {
    return true;
  }
  return false;
});

const readonly = computed(() => {
  if (props.mode === "read" || isReadonly(perm, config.value.code)) {
    return true;
  }
  return false;
});

const handleValueChange = (val: number) => {
  _value.value = val.toString();
};
</script>

<template>
  <div>
    <el-input-number
      v-if="mounted"
      v-model="inputValue"
      :max="max"
      :min="min"
      :disabled="disabled"
      :readonly="readonly"
      :placeholder="config.props.placeholder"
      @change="handleValueChange"
    />
  </div>
</template>

<style scoped></style>
